import React, {Component} from 'react';
import {Table,Space,Button } from "antd";


class AllReport extends Component {

    //回调函数
    constructor(props){
        super(props);
        this.state= {
            //  当前页
            current:'1',
            //  每页显示
            pageSize:'5',
            //  总条数
            total:'1',
            //  默认显示第几页
            defaultCurrent:'1',
            //是否点击跳转
            showQuickJumper:true,

            //数据
            data : [
                {
                    key:1,
                    read:1,
                    title:333,
                    class_name:"日报",
                    user_name:"二两",
                    sub_time:2022-8-12,
                    accept:"半斤",
                    annotation:"批注",
                }
            ],
        };
        this.isShanChu = this.isShanChu.bind(this)
    }

    //点击页码事件
    changPage(current){
        console.log(current);
        this.setState({
            current:current
        })
    }
    //变化回调
    onShowSizeChange(Current,pageSize){
        console.log(Current,pageSize)
    }
    //删除事件
    isShanChu(index){
        console.log('获取的index==='+index);
        const data = [...this.state.data];
        data.splice(index,1)
        this.setState({
            data
        })
    }
    //分页
    fenye(){
        const fy = {
            //  当前页
            current:this.state.current,
            //  每页显示
            pageSize:this.state.pageSize,
            //  总条数
            total:this.state.total,
            //  点击下一页
            onChange:(current)=> this.changPage(current),
            //  每页显示变化
            onShowSizeChange:(Current,pageSize) =>{
                console.log(pageSize);
                this.onShowSizeChange(Current,pageSize)
            },
            //  默认第几页
            defaultCurrent:this.state.defaultCurrent,
            //是否可以跳转
            showQuickJumper:this.state.showQuickJumper,
        };
        return fy
    }
    render() {
        const columns = [

            {
                title: '阅读',
                dataIndex: 'read',
                key: 'index',
                align:'center'
            },
            {
                title: '标题',
                dataIndex: 'title',
                key: 'index',
                align:'center'
            },
            {
                title: '报告类型',
                dataIndex: 'class_name',
                key: 'index',
                align:'center'
            },
            {
                title: '报告人',
                key: 'index',
                dataIndex: 'user_name',
                align:'center',
            },
            {
                title: '接收人',
                key: 'index',
                dataIndex: 'accept',
                align:'center',
            },
            {
                title: '报告时间',
                key: 'index',
                dataIndex: 'sub_time',
                align:'center',
            },
            {
                title: '操作',
                key: 'index',
                align:'center',
                render: (text, record,index) => (
                    <Space size="middle">
                        <Button type="primary" >批注</Button>

                        <Button onClick={()=>this.isShanChu(index)}>删除</Button>
                    </Space>
                ),
            },
        ];
        return (
            <div>
                <Table rowKey="key"
                    className={'tab'}
                    columns={columns}
                    dataSource={this.state.data}
                    pagination={this.fenye()}
                />
            </div>
        )
    }
}

export default AllReport;